<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--优先使用IE最新版本和Chrome-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chome=1" />
		<!--视口--设备宽度--初始缩放比例--最小缩放比例--最大缩放比例--用户缩放-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--禁止浏览器自动的识别-电话号码-email--->
		<meta name="format-detection" content="telephone=no,email=no"/>
		<!--是否启用Web全屏-->
		<meta name="apple-mobile-web-app-capable" content='yes' />
		<meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent">
		<!--设置苹果工具栏颜色-->
		<meta name="apple-mobile-web-app-status-bar-style" content='black' />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/koubei.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/swiper.min.js"></script>
	</head>
	<body>
		<!-- 导航栏部分 -->
		<header>
			<!-- 顶部 -->
			<img src="img/top.png"/>
			<!-- 搜索部分 -->
			<nav>
				<li>北京<i class="fa fa-angle-down"></i></li>
				<li><i class="fa fa-search"></i><input type="text" placeholder="你附近的全时便利店" /><i class="fa fa-microphone"></i></li>
				<li><img src="img/righttu.png"/></li>
			</nav>
		</header>
		<!-- 固定底部标签栏 -->
		<footer>
			<div>
				<img src="img/di1.png"/>
				<span>首页</span>
			</div>
			<div>
				<img src="img/di2.png"/>
				<span style="color: #29A1F7;">口碑</span>
			</div>
			<div>
				<img src="img/di3.png"/>
				<span>朋友</span>
			</div>
			<div>
				<img src="img/di4.png"/>
				<span>我的</span>
			</div>
		</footer>
		<!-- 中间内容区域 -->
		<section>
			<!-- 轮播部分 -->
			<div class="swiper-container swiper1">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="img/lunbo1.png"/></div>
					<div class="swiper-slide"><img src="img/lunbo2.png"/></div>
				</div>
			</div>
			<!-- 按钮组部分 -->
			<div class="swiper-container swiper2">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div>
							<img src="img/an1.png"/>
							<span>美食</span>
						</div>
						<div>
							<img src="img/an2.png"/>
							<span>快餐小吃</span>
						</div>
						<div>
							<img src="img/an3.png"/>
							<span>火锅</span>
						</div>
						<div>
							<img src="img/an4.png"/>
							<span>热门商圈</span>
						</div>
						<div>
							<img src="img/an5.png"/>
							<span>休闲娱乐</span>
						</div>
						<div>
							<img src="img/an6.png"/>
							<span>外卖</span>
						</div>
						<div>
							<img src="img/an7.png"/>
							<span>超市</span>
						</div>
						<div>
							<img src="img/an8.png"/>
							<span>KTV</span>
						</div>
						<div>
							<img src="img/an9.png"/>
							<span>丽人</span>
						</div>
						<div>
							<img src="img/an10.png"/>
							<span>电影</span>
						</div>
					</div>
					<div class="swiper-slide">
						<div>
							<img src="img/niu1.png"/>
							<span>亲子</span>
						</div>
						<div>
							<img src="img/niu2.png"/>
							<span>摄影</span>
						</div>
						<div>
							<img src="img/niu3.png"/>
							<span>结婚</span>
						</div>
						<div>
							<img src="img/niu4.png"/>
							<span>运动健身</span>
						</div>
						<div>
							<img src="img/niu5.png"/>
							<span>足疗养生</span>
						</div>
						<div>
							<img src="img/niu6.png"/>
							<span>洗衣</span>
						</div>
						<div>
							<img src="img/niu7.png"/>
							<span>宠物</span>
						</div>
						<div>
							<img src="img/niu8.png"/>
							<span>面包甜点</span>
						</div>
						<div>
							<img src="img/niu9.png"/>
							<span>酒店预订</span>
						</div>
						<div>
							<img src="img/niu10.png"/>
							<span>周末游</span>
						</div>
					</div>
				</div>
				<!-- 小圆点部分 -->
				<div class="swiper-pagination"></div>
			</div>
			<!-- 口碑生活圈部分 -->
			<div id="gdxx">
				<img src="img/kbshq.png"/>
				<div class="swiper-container swiper3">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<li>他懂<span>陈奕迅</span>,也背爱马仕“最不正经”包</li>
							<img src="img/gdtp1.png"/>
						</div>
						<div class="swiper-slide">
							<li>据说吃这玩意的人,都会得“深井”病？</li>
							<img src="img/gdtp2.png"/>
						</div>
						<div class="swiper-slide">
							<li>这个厨娘厉害了,她把<span>老公的画</span>变成一道美食!</li>
							<img src="img/gdtp3.png"/>
						</div>
						<div class="swiper-slide">
							<li>3件事女人藏不住：爱、包、减肥但是依然想吃</li>
							<img src="img/gdtp4.png"/>
						</div>
						<div class="swiper-slide">
							<li>七张桌子的店要配7个厨师,有个媒体<span>老司机</span>干脆开了个家日料店</li>
							<img src="img/gdtp5.png"/>
						</div>
						<div class="swiper-slide">
							<li>40岁的“<span>少女</span>”你见过吗？承认吧,这就是你想要的样子!</li>
							<img src="img/gdtp6.png"/>
						</div>
					</div>
				</div>
			</div>
			<!-- 大牌快抢部分 -->
			<div id="dpkq">
				<div>
					<p>大牌快抢&nbsp;<img src="img/huomiao.png"/><span>&nbsp;火热进行中</span></p>
					<ul>
						<li>真功夫<br /><span>0.01</span><span>元</span><s>9元</s></li>
						<img src="img/qiang1.png"/>
					</ul>
				</div>
				<div>
					<p>专属优惠</p>
					<ul>
						<li>汉堡王<br /><span>兑换券</span></li>
						<img src="img/qiang2.png"/>
					</ul>
				</div>
			</div>
			<!-- 人气眼部分 -->
			<div id="rqy">
				<div><img src="img/renqiyan.png"/>&nbsp;人气眼</div>
				<div>每天11点、17点、22点,准点抢红包哦~</div>
				<div>
					<img src="img/renqi1.png"/>
					<img src="img/renqi2.png"/>
				</div>
				<div>
					<img src="img/ckrq1.png"/>
					<img src="img/ckrq2.png"/>
					<img src="img/ckrq3.png"/>
				</div>
			</div>
			<!-- banner部分 -->
			<div id="banner_a"><img src="img/ban1.png"/></div>
			<!-- 为你定制部分 -->
			<div id="wndz">
				<div><img src="img/xin.png"/>&nbsp;为你定制</div>
				<div>Hi，上午好！附近高性价比午餐都为你备好啦</div>
				<div>
					<img src="img/wndz1.png"/>
					<img src="img/wndz2.png"/>
					<img src="img/wndz3.png"/>
					<li>查看<br />更多</li>
				</div>
			</div>
			<!-- 店铺部分 -->
			<div id="dianpu">
				<div>
					<img src="img/dianpu1.png"/>
					<ul>
						<li>蜜雪冰城(吉利大学店)</li>
						<li>
							<span>一人食</span>&nbsp;
							<span>面包甜品</span>
							<span>408m</span>
						</li>
						<li>满5元随机立减</li>
						<li>“和你契合度高的甜点，快去试试吧”</li>
					</ul>
				</div>
				<div>
					<img src="img/dianpu2.png"/>
					<ul>
						<li>张亮麻辣烫(吉利大学店)</li>
						<li>
							<span>工作餐</span>
							<span>472m</span>
						</li>
						<li>满5元随机立减</li>
						<li>“很满意的店，最爱吃麻辣烫了”</li>
					</ul>
				</div>
				<div>
					<img src="img/dianpu3.png"/>
					<ul>
						<li>嘉食多快餐(吉利大学三食堂)</li>
						<li>
							<span>工作餐</span>
							<span>689m</span>
						</li>
						<li>满5元随机立减</li>
						<li>“你可能感兴趣的快餐，值得尝试哦”</li>
					</ul>
				</div>
				<p>查看更多&nbsp;<span>></span></p>
			</div>
			<!-- 口碑生活圈部分 -->
			<div id="kbshq">
				<img src="img/kbshq2.png"/>
				<!-- tab切换部分 -->
				<div class="swiper-container swiper4">
					<div class="swiper-wrapper">
						<div class="swiper-slide active">
							<img src="img/tab1.png"/>&nbsp;&nbsp;推荐
						</div>
						<div class="swiper-slide">
							<img src="img/tab2.png"/>&nbsp;&nbsp;问答
						</div>
						<div class="swiper-slide">
							<img src="img/tab3.png"/>&nbsp;&nbsp;探店
						</div>
						<div class="swiper-slide">
							<img src="img/tab4.png"/>&nbsp;&nbsp;订阅
						</div>
					</div>
				</div>
				<!-- tab切换推荐部分 -->
				<div class="swiper-container swiper5">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="img/ban2.png"/>
							<div class="rong">
								<span><img src="img/id1.png"/>&nbsp;&nbsp;每日健体</span>
								<div>
									<ul>
										<li>8个瘦身动作，告别赘肉，拥有360度无死角性感身材！</li>
										<li><img src="img/liulan.png"/>&nbsp;101&nbsp;&nbsp;&nbsp;<img src="img/zan.png"/>&nbsp;1</li>
									</ul>
									<img src="img/id_tu1.png"/>
								</div>
							</div>
							<div class="rong">
								<span><img src="img/id2.png"/>&nbsp;&nbsp;护肤小诚实</span>
								<div>
									<ul>
										<li>一笑老十岁！杨幂的鱼尾纹真的很吓人！</li>
										<li><img src="img/liulan.png"/>&nbsp;264</li>
									</ul>
									<img src="img/id_tu2.png"/>
								</div>
							</div>
							<div class="rong">
								<span><img src="img/id3.png"/>&nbsp;&nbsp;艾格吃饱了</span>
								<div>
									<ul>
										<li>都说这间餐厅的烤鸭好吃，其实炒鸡好吃</li>
										<li><span>探店</span>&nbsp;&nbsp;&nbsp;<img src="img/liulan.png"/>&nbsp;1102&nbsp;&nbsp;&nbsp;<img src="img/zan.png"/>&nbsp;4</li>
									</ul>
									<img src="img/id_tu3.png"/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<script type="text/javascript" src="js/koubei.js"></script>
	</body>
</html>
